<!--
 * @Description:
 * @Date: 2024-04-11 16:32:06
 * @LastEditTime: 2024-04-28 15:42:46
-->
<template>
  <div class="message-box" :id="`message-${msg.info.id}`" :style="{
    top: msg.aaa[1] + 'px',
    left: msg.aaa[0] + 'px',
    color: '#fff',
  }">
    <div class="inner">

      <div class="ellipsis">营业厅：{{ msg.info.name }}</div>
      <div class="ellipsis">设备总数：{{ msg.info.num }}</div>
      <div class="ellipsis">完成情况：{{ msg.info.target }}</div>
      <el-button type="primary" size="mini" round @click="skip">查看详情</el-button>
    </div>
  </div>
</template>

<script>
import router from "../../../../router/index";
export default {
  name: "MessageBox",
  props: {
    msg: {
      type: Object,
    },
    num: {
      type: Number,
    },
  },
  mounted() {

  },
  methods: {
    skip() {
      this.$messageBox.hide(() => { });
      router.push(
        {
          path: "/equipmentTableList",
          query:{
            departmentCode:this.msg.info.departmentCode
          }
        }
      );
    },
    hide() {
      this.$messageBox.hide(() => { });
    },
  },
  watch: {
    msg: {
      handler(value) {
        this.$forceUpdate();
      },
      immediate: true,
      deep: true,
    },
  },
};
</script>

<style lang="scss" scope>
.message-box {
  position: absolute;
  width: 300px;
  height: 220px;
  background-image: url("../../../../assets/images/digitzation/kaung.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  transform: translate(-50%, -120%);
  padding: 40px;

  .inner {
    font-size: 16px;
    font-weight: bold;
    width: 100%;
    height: 100%;
    padding: 10px 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

  }
}

.ellipsis {
  width: 100%;
  /* 必须设置固定宽度或最大宽度 */
  overflow: hidden;
  /* 隐藏溢出内容 */
  white-space: nowrap;
  /* 强制文本不换行 */
  text-overflow: ellipsis;
  /* 超出部分显示省略号 */
}
</style>
